<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>Typora Writings</title><link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'><style type='text/css'>html, body {overflow-x: initial !important;}.CodeMirror { height: auto; }
.CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
.CodeMirror-lines { padding: 4px 0px; }
.CodeMirror pre { }
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }
.CodeMirror-gutters { border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); white-space: nowrap; background-color: rgb(247, 247, 247); }
.CodeMirror-linenumbers { }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.CodeMirror div.CodeMirror-cursor { border-left-width: 1px; border-left-style: solid; border-left-color: black; z-index: 3; }
.CodeMirror div.CodeMirror-secondarycursor { border-left-width: 1px; border-left-style: solid; border-left-color: silver; }
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width: auto; border: 0px; z-index: 1; background: rgb(119, 238, 119); }
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite { }
.cm-tab { display: inline-block; }
.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property { color: rgb(217, 79, 138); }
.cm-s-typora-default pre.cm-header1:not(.cm-atom) :not(.cm-overlay) { font-size: 2rem; line-height: 2rem; }
.cm-s-typora-default pre.cm-header2:not(.cm-atom) :not(.cm-overlay) { font-size: 1.4rem; line-height: 1.4rem; }
.cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number { color: rgb(149, 132, 134); }
.cm-s-typora-default .cm-table-row, .cm-s-typora-default .cm-block-start { font-family: monospace; }
.cm-s-typora-default .cm-comment, .cm-s-typora-default .cm-code { color: rgb(74, 90, 159); font-family: monospace; }
.cm-s-typora-default .cm-tag { color: rgb(169, 68, 66); }
.cm-s-typora-default .cm-string { color: rgb(126, 134, 169); }
.cm-s-typora-default .cm-link { color: rgb(196, 122, 15); text-decoration: underline; }
.cm-s-typora-default .cm-variable-2, .cm-s-typora-default .cm-variable-1 { color: inherit; }
.cm-s-typora-default .cm-overlay { font-size: 1rem; font-family: monospace; }
.CodeMirror.cm-s-typora-default div.CodeMirror-cursor { border-left-width: 3px; border-left-style: solid; border-left-color: rgb(228, 98, 154); }
.cm-s-typora-default .CodeMirror-activeline-background { left: -60px; right: -30px; background: rgba(204, 204, 204, 0.2); }
.cm-s-typora-default .CodeMirror-gutters { border-right-style: none; background-color: inherit; }
.cm-s-typora-default .cm-trailing-space-new-line::after, .cm-startspace::after, .cm-starttab .cm-tab::after { content: "•"; position: absolute; left: 0px; opacity: 0; font-family: LetterGothicStd, monospace; }
.os-windows .cm-startspace::after, .os-windows .cm-starttab .cm-tab::after { left: -0.1em; }
.cm-starttab .cm-tab::after { content: " "; }
.cm-startspace, .cm-tab, .cm-starttab, .cm-trailing-space-a, .cm-trailing-space-b, .cm-trailing-space-new-line { font-family: monospace; position: relative; }
.cm-s-typora-default .cm-trailing-space-new-line::after { content: "↓"; opacity: 0.3; }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: black; }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-property { color: black; }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: blue; }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: bold; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: rgb(255, 0, 0); }
.cm-invalidchar { color: rgb(255, 0, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; padding-right: 30px; height: 100%; outline: none; position: relative; box-sizing: content-box; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow-x: hidden; overflow-y: scroll; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow-y: hidden; overflow-x: scroll; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; word-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; background: transparent; }
.CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right-width: 30px; border-right-style: solid; border-right-color: transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right-style: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-widget { }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right-style: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.CodeMirror-selected { background: rgb(217, 217, 217); }
.CodeMirror-focused .CodeMirror-selected { background: rgb(215, 212, 240); }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
.CodeMirror span { }
@media print { 
  .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}
.CodeMirror-lint-markers { width: 16px; }
.CodeMirror-lint-tooltip { border: 1px solid black; border-radius: 4px; color: infotext; font-family: monospace; overflow: hidden; padding: 2px 5px; position: fixed; white-space: pre-wrap; z-index: 10000; max-width: 600px; opacity: 0; transition: opacity 0.4s; font-size: 0.8em; background-color: infobackground; }
.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning { background-position: left bottom; background-repeat: repeat-x; }
.CodeMirror-lint-mark-error { background-image: url(""); }
.CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning { cursor: pointer; display: inline-block; height: 16px; width: 16px; vertical-align: middle; position: relative; background-position: center center; background-repeat: no-repeat; }
.CodeMirror-lint-message-error, .CodeMirror-lint-message-warning { padding-left: 18px; background-position: left top; background-repeat: no-repeat; }
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { background-image: url(""); }
.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning { background-image: url(""); }
.CodeMirror-lint-marker-multiple { width: 100%; height: 100%; background-image: url(""); background-position: right bottom; background-repeat: no-repeat; }


html { font-size: 14px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: rgb(181, 214, 252); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; word-wrap: break-word; position: relative; padding-bottom: 70px; white-space: pre-wrap; overflow-x: auto; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
@media screen and (max-width: 500px) { 
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  .CodeMirror-sizer { margin-left: 0px !important; }
  .CodeMirror-gutters { display: none !important; }
}
.typora-export #write { margin: 0px auto; }
#write > p:first-child, #write > ul:first-child, #write > ol:first-child, #write > pre:first-child, #write > blockquote:first-child, #write > div:first-child, #write > table:first-child { margin-top: 30px; }
#write li > table:first-child { margin-top: -20px; }
img { max-width: 100%; }
input, button, select, textarea { color: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
::before, ::after, * { box-sizing: border-box; }
#write p, #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write div, #write pre { width: inherit; }
#write p, #write h1, #write h2, #write h3, #write h4, #write h5, #write h6 { position: relative; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
p { -webkit-margin-before: 1rem; -webkit-margin-after: 1rem; -webkit-margin-start: 0px; -webkit-margin-end: 0px; }
.mathjax-block { margin-top: 0px; margin-bottom: 0px; -webkit-margin-before: 0rem; -webkit-margin-after: 0rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: bold; font-style: italic; }
a { cursor: pointer; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; margin: 4px 0px 0px; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 80px; }
.CodeMirror-gutters { border-right-width: 0px; background-color: inherit; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
pre { white-space: pre-wrap; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; position: relative !important; background: inherit; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
.md-fences .CodeMirror.CodeMirror-wrap { top: -1.6em; margin-bottom: -1.6em; }
.md-fences.mock-cm { white-space: pre-wrap; }
.show-fences-line-number .md-fences { padding-left: 0px; }
.show-fences-line-number .md-fences.mock-cm { padding-left: 40px; }
.footnotes { opacity: 0.8; font-size: 0.9rem; padding-top: 1em; padding-bottom: 1em; }
.footnotes + .footnotes { margin-top: -1em; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: normal; text-align: left; box-sizing: content-box; direction: ltr; background: transparent; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li p, li .mathjax-block { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; }
@media print { 
  html, body { height: 100%; }
  .typora-export * { -webkit-print-color-adjust: exact; }
  h1, h2, h3, h4, h5, h6 { break-after: avoid-page; orphans: 2; }
  p { orphans: 4; }
  html.blink-to-pdf { font-size: 13px; }
  .typora-export #write { padding-left: 1cm; padding-right: 1cm; }
  .typora-export #write::after { height: 0px; }
  @page { margin: 20mm 0mm; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 2.86rem; white-space: pre-wrap; display: block; background: rgb(204, 204, 204); }
p .md-image:only-child, p img:only-child { display: inline-block; width: 100%; text-align: center; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.mathjax-block { white-space: pre; overflow: hidden; width: 100%; }
p + .mathjax-block { margin-top: -1.143rem; }
.mathjax-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: none; box-shadow: none; }
.task-list { list-style-type: none; }
.task-list-item { position: relative; padding-left: 1em; }
.task-list-item input { position: absolute; top: 0px; left: 0px; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc::after, .md-toc-content::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); text-decoration: none; }
.md-toc-inner:hover { }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: bold; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) { 
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
.md-tag { opacity: 0.5; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: monospace; }
code { text-align: left; }
h1 .md-tag, h2 .md-tag, h3 .md-tag, h4 .md-tag, h5 .md-tag, h6 .md-tag { font-weight: initial; opacity: 0.35; }
a.md-header-anchor.md-print-anchor { border: none !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: none !important; text-decoration: initial !important; text-shadow: initial !important; background: transparent !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.mathjax-block .MathJax_SVG_Display { text-align: center; margin: 1em 0em; position: relative; text-indent: 0px; max-width: none; max-height: none; min-width: 0px; min-height: 0px; width: 100%; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: monospace; }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: normal; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none; }


@font-face { font-family: "Open Sans"; font-style: normal; font-weight: normal; src: local("Open Sans Regular"), url("./github/400.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: normal; src: local("Open Sans Italic"), url("./github/400i.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: bold; src: local("Open Sans Bold"), url("./github/700.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: bold; src: local("Open Sans Bold Italic"), url("./github/700i.woff") format("woff"); }
html { font-size: 16px; }
body { font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(51, 51, 51); line-height: 1.6; }
#write { max-width: 860px; margin: 0px auto; padding: 20px 30px 100px; }
#write > ul:first-child, #write > ol:first-child { margin-top: 30px; }
body > :first-child { margin-top: 0px !important; }
body > :last-child { margin-bottom: 0px !important; }
a { color: rgb(65, 131, 196); }
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
h1 tt, h1 code { font-size: inherit; }
h2 tt, h2 code { font-size: inherit; }
h3 tt, h3 code { font-size: inherit; }
h4 tt, h4 code { font-size: inherit; }
h5 tt, h5 code { font-size: inherit; }
h6 tt, h6 code { font-size: inherit; }
h1 { padding-bottom: 0.3em; font-size: 2.25em; line-height: 1.2; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); }
h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); }
h3 { font-size: 1.5em; line-height: 1.43; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; color: rgb(119, 119, 119); }
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
li > ol, li > ul { margin: 0px; }
hr { height: 4px; padding: 0px; margin: 16px 0px; border-width: 0px 0px 1px; border-style: none none solid; overflow: hidden; box-sizing: content-box; border-bottom-color: rgb(221, 221, 221); background-color: rgb(231, 231, 231); }
body > h2:first-child { margin-top: 0px; padding-top: 0px; }
body > h1:first-child { margin-top: 0px; padding-top: 0px; }
body > h1:first-child + h2 { margin-top: 0px; padding-top: 0px; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { margin-top: 0px; padding-top: 0px; }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0px; padding-top: 0px; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0px; }
li p.first { display: inline-block; }
ul, ol { padding-left: 30px; }
ul:first-child, ol:first-child { margin-top: 0px; }
ul:last-child, ol:last-child { margin-bottom: 0px; }
blockquote { border-left-width: 4px; border-left-style: solid; border-left-color: rgb(221, 221, 221); padding: 0px 15px; color: rgb(119, 119, 119); }
blockquote blockquote { padding-right: 0px; }
table { padding: 0px; word-break: initial; }
#write { overflow-x: auto; }
table tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204); margin: 0px; padding: 0px; background-color: white; }
table tr:nth-child(2n) { background-color: rgb(248, 248, 248); }
table tr th { font-weight: bold; border: 1px solid rgb(204, 204, 204); text-align: left; margin: 0px; padding: 6px 13px; }
table tr td { border: 1px solid rgb(204, 204, 204); text-align: left; margin: 0px; padding: 6px 13px; }
table tr th:first-child, table tr td:first-child { margin-top: 0px; }
table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }
.CodeMirror-gutters { border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); }
.md-fences, code, tt { border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 2px 4px 0px; font-size: 0.9em; background-color: rgb(248, 248, 248); }
.md-fences { margin-bottom: 15px; margin-top: 15px; padding: 8px 1em 6px; }
.task-list { padding-left: 0px; }
.task-list-item { padding-left: 32px; }
.task-list-item input { top: 3px; left: 8px; }
@media screen and (min-width: 914px) { 
}
@media print { 
  html { font-size: 13px; }
  table, pre { break-inside: avoid; }
  pre { word-wrap: break-word; }
}
.md-fences { background-color: rgb(248, 248, 248); }
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; background-color: rgb(247, 247, 247); }
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
.md-image > .md-meta { border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: Consolas, "Liberation Mono", Courier, monospace; padding: 2px 4px 0px; font-size: 0.9em; color: inherit; background-color: rgb(248, 248, 248); }
.md-tag { color: inherit; }
.md-toc { margin-top: 20px; padding-bottom: 20px; }
#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }
#typora-quick-open-item { border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; background-color: rgb(250, 250, 250); }
#md-notification::before { top: 10px; }
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.117647); }
header, .context-menu, .megamenu-content, footer { font-family: "Segoe UI", Arial, sans-serif; }






</style>
</head>
<body class='typora-export' >
<div  id='write'  class = 'is-node'><p>这里是海豚项目代码特有的风格指南。在工程中使用vue和es6开发海豚项目时，为了回避错误、提高代码可维护性和可阅读性，提升团队的协作效率，为项目输出高质量的代码，特制订此文档。本规范文档需要经过前端开发人员的一致评审，评审通过后可用来指导前端代码的审核，做到有理有据。本文档如有不对或者不合理的地方请及时联系zhuxiankang，经讨论决定后可更改。本文档目前只是初稿，会进行持续更新。</p><h2><a name='header-c23' class='md-header-anchor '></a>规范目的</h2><ul><li>回避错误</li><li>可阅读性</li><li>可维护性</li><li>高质量</li><li>新人快速适应风格</li></ul><h2><a name='header-c40' class='md-header-anchor '></a>规则类型</h2><ul><li>强烈推荐：强烈推荐会纳入缺陷考察范围。</li><li>推荐：推荐是希望去执行的。</li><li>谨慎：谨慎是根绝场景而定去执行的。</li></ul><h2><a name='header-c51' class='md-header-anchor '></a>规则分类</h2><ul><li>Vue风格指南</li><li>Es6风格指南</li><li>基础风格指南</li><li>命名风格指南</li><li>Css风格指南</li></ul><h3><a name='header-c68' class='md-header-anchor '></a>Vue风格指南</h3><ul><li>[强烈推荐][组件名为多个单词，根组件App和不被调用的组件除外。](<a href='https://cn.vuejs.org/v2/style-guide/#%25E7%25BB%2584%25E4%25BB%25B6%25E5%2590%258D%25E4%25B8%25BA%25E5%25A4%259A%25E4%25B8%25AA%25E5%258D%2595%25E8%25AF%258D-%25E5%25BF%2585%25E8%25A6%2581' target='_blank' >https://cn.vuejs.org/v2/style-guide/#%E7%BB%84%E4%BB%B6%E5%90%8D%E4%B8%BA%E5%A4%9A%E4%B8%AA%E5%8D%95%E8%AF%8D-%E5%BF%85%E8%A6%81</a>)</li><li>[强烈推荐][Prop 定义应该尽量详细。](<a href='https://cn.vuejs.org/v2/style-guide/#Prop-%25E5%25AE%259A%25E4%25B9%2589-%25E5%25BF%2585%25E8%25A6%2581' target='_blank' >https://cn.vuejs.org/v2/style-guide/#Prop-%E5%AE%9A%E4%B9%89-%E5%BF%85%E8%A6%81</a>)</li><li>[强烈推荐][为 v-for 设置键值。](<a href='https://cn.vuejs.org/v2/style-guide/#%25E4%25B8%25BA-v-for-%25E8%25AE%25BE%25E7%25BD%25AE%25E9%2594%25AE%25E5%2580%25BC-%25E5%25BF%2585%25E8%25A6%2581' target='_blank' >https://cn.vuejs.org/v2/style-guide/#%E4%B8%BA-v-for-%E8%AE%BE%E7%BD%AE%E9%94%AE%E5%80%BC-%E5%BF%85%E8%A6%81</a>)</li><li>[强烈推荐][避免-v-if-和-v-for-用在一起。](<a href='https://cn.vuejs.org/v2/style-guide/#%25E9%2581%25BF%25E5%2585%258D-v-if-%25E5%2592%258C-v-for-%25E7%2594%25A8%25E5%259C%25A8%25E4%25B8%2580%25E8%25B5%25B7-%25E5%25BF%2585%25E8%25A6%2581' target='_blank' >https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81</a>)</li><li>[强烈推荐][为组件样式设置作用域。](<a href='https://cn.vuejs.org/v2/style-guide/#%25E4%25B8%25BA%25E7%25BB%2584%25E4%25BB%25B6%25E6%25A0%25B7%25E5%25BC%258F%25E8%25AE%25BE%25E7%25BD%25AE%25E4%25BD%259C%25E7%2594%25A8%25E5%259F%259F-%25E5%25BF%2585%25E8%25A6%2581' target='_blank' >https://cn.vuejs.org/v2/style-guide/#%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E4%BD%9C%E7%94%A8%E5%9F%9F-%E5%BF%85%E8%A6%81</a>)</li><li>[推荐]  3个特性以上的元素应该分多行撰写，每个特性一行。</li><li>[推荐]  计算属性和methods、watch，优先选择计算属性。</li><li>[推荐] 组件和菜单内通用的方法、数据可以使用mixins封装。</li><li>[推荐] 避免使用document.getElementById、document.querySelectorAll等，推荐使用ref绑定DOM对象。</li></ul><blockquote><p>更多请查看<a href='https://cn.vuejs.org/v2/style-guide/'>Vue风格指南</a>和<a href='https://cn.vuejs.org/v2/guide/'>Vue官方文档</a>。</p></blockquote><h3><a name='header-c100' class='md-header-anchor '></a>Es6风格指南</h3><h4><a name='header-c101' class='md-header-anchor '></a>[强烈推荐] Promise需要同时有resolve和reject。</h4><p>H4右侧没法体现，做到每个url可以定位到具体的缺陷</p><p></p><p></p><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span>​</span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">promise</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Promise</span>((<span class="cm-def">resolve</span>, <span class="cm-def">reject</span>) <span class="cm-operator">=&gt;</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-variable-2">resolve</span>(<span class="cm-variable">value</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;">})</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">promise</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Promise</span>((<span class="cm-def">resolve</span>, <span class="cm-def">reject</span>) <span class="cm-operator">=&gt;</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span><span class="cm-keyword">if</span>(<span class="cm-comment">/* 条件处理 */</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>  <span class="cm-variable-2">resolve</span>(<span class="cm-variable">value</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-comment">/* 条件处理 */</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>  <span class="cm-variable">reject</span>(<span class="cm-variable">err</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>}<span class="cm-tab">   </span></span></pre><pre class=""><span style="padding-right: 0.1px;">})</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 184px;"></div></div></div></pre><h4><a name='header-c116' class='md-header-anchor '></a>[强烈推荐] 使用try/catch捕获await。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">async</span> <span class="cm-keyword">function</span> <span class="cm-def">fn</span>() { </span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">await</span> <span class="cm-variable">http</span>.<span class="cm-property">fn</span>()</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">async</span> <span class="cm-keyword">function</span> <span class="cm-def">fn</span>() {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">try</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-keyword">await</span> <span class="cm-variable">http</span>.<span class="cm-property">fn</span>()</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> } <span class="cm-keyword">catch</span>(<span class="cm-def">err</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-variable">console</span>.<span class="cm-property">error</span>(<span class="cm-variable-2">err</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;"> }</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 184px;"></div></div></div></pre><blockquote><p>注解：使用try...catch时catch会产生新的作用域，有性能消耗问题，具体可查看<a href='https://git.hikvision.com.cn/users/zhuxiankang/repos/dolphin_code/browse/%25E4%25BD%259C%25E7%2594%25A8%25E5%259F%259F%25E9%2593%25BE.md'>作用域链</a>。但是对于可预知的错误仍然强烈推荐使用catch捕获并抛出错误信息，但是这里不应该采用console.error(err)的形式打印错误日志，应该使用throw new Error()的形式抛出错误信息，抛出的错误信息也应该有一个前端的错误信息规范。</p></blockquote><h4><a name='header-c128' class='md-header-anchor '></a>[强烈推荐] 使用模板字符串。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">ducomentFragment</span> <span class="cm-operator">=</span> <span class="cm-string">'&lt;li&gt;'</span> <span class="cm-operator">+</span> <span class="cm-variable">name</span> <span class="cm-operator">+</span> <span class="cm-string">'&lt;/li&gt;'</span> <span class="cm-operator">+</span> <span class="cm-string">'&lt;li&gt;'</span><span class="cm-operator">+</span> <span class="cm-variable">age</span> <span class="cm-operator">+</span> <span class="cm-string">'&lt;/li&gt;'</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">ducomentFragment</span> <span class="cm-operator">=</span> <span class="cm-string-2">`</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"> &nbsp;  <span class="cm-string-2">&lt;li&gt;${</span><span class="cm-variable">name</span><span class="cm-string-2">}&lt;/li&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp;  <span class="cm-string-2">&lt;li&gt;${</span><span class="cm-variable">age</span><span class="cm-string-2">}&lt;/li&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-string-2">`</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><h4><a name='header-c137' class='md-header-anchor '></a>[强烈推荐] 使用Array.fill初始化和清空数据。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">array</span> <span class="cm-operator">=</span> [<span class="cm-string">'1'</span>,<span class="cm-string">'1'</span>,<span class="cm-string">'1'</span>,<span class="cm-string">'1'</span>,<span class="cm-string">'1'</span>,<span class="cm-string">'1'</span>]</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// 注意只能是基础数据类型，引用类型引用的是同一个对象</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">array</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Array</span>(<span class="cm-number">6</span>).<span class="cm-property">fill</span>(<span class="cm-string">'1'</span>) </span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><h4><a name='header-c146' class='md-header-anchor '></a>[强烈推荐] for...in使用for...of/Object.keys()代替。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">obj</span> <span class="cm-operator">=</span> {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-number cm-property">0</span>: <span class="cm-string">'a'</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-number cm-property">1</span>: <span class="cm-string">'b'</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-property">length</span>:<span class="cm-number">2</span></span></pre><pre class=""><span style="padding-right: 0.1px;">};</span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">value</span> <span class="cm-keyword">in</span> <span class="cm-variable">obj</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 207px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">obj</span> <span class="cm-operator">=</span> {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-number cm-property">0</span>: <span class="cm-string">'a'</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-number cm-property">1</span>: <span class="cm-string">'b'</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-property">length</span>:<span class="cm-number">2</span></span></pre><pre class=""><span style="padding-right: 0.1px;">};</span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">value</span> <span class="cm-keyword">of</span> <span class="cm-variable">Object</span>.<span class="cm-property">keys</span>(<span class="cm-variable">obj</span>)) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">value</span> <span class="cm-keyword">of</span> <span class="cm-variable">Array</span>.<span class="cm-property">from</span>(<span class="cm-variable">obj</span>)) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 299px;"></div></div></div></pre><blockquote><p>注解：关于循环做了一些性能测试，对于需要遍历大数据量的组织树、穿梭框等，建议采用高性能的循环方式，具体可以查看<a href='https://git.hikvision.com.cn/users/zhuxiankang/repos/dolphin_code/browse/%25E7%25AE%2597%25E6%25B3%2595%25E5%2592%258C%25E6%25B5%2581%25E7%25A8%258B%25E6%258E%25A7%25E5%2588%25B6.md'>算法流程控制</a>。</p></blockquote><h4><a name='header-c158' class='md-header-anchor '></a>[强烈推荐] String可以使用includes代替indexOf函数，Array可以使用includes方法判断参数是否存在数组中。</h4><h4><a name='header-c159' class='md-header-anchor '></a>[强烈推荐] parseInt/parseFloat等不再挂载到window下，而是Number下，使用Number.parseInt。</h4><h4><a name='header-c160' class='md-header-anchor '></a>[强烈推荐] Object.assign不要嵌套过多对象，或者滥用Object.assign，推荐使用扩展运算符...</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-variable">Object</span>.<span class="cm-property">assign</span>( <span class="cm-variable">obj</span>, {}, <span class="cm-variable">obj1</span>, <span class="cm-variable">obj2</span>, <span class="cm-variable">obj3</span>, { <span class="cm-property">a</span>:<span class="cm-number">1</span>, <span class="cm-property">b</span>:<span class="cm-number">2</span> }, { <span class="cm-property">c</span>:<span class="cm-number">3</span> } )</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// 使用扩展运算符并不能实现深拷贝</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-variable">obj</span> <span class="cm-operator">=</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-meta">...</span><span class="cm-variable">obj1</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-meta">...</span><span class="cm-variable">obj2</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-meta">...</span><span class="cm-variable">obj3</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">a</span>:<span class="cm-number">1</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">b</span>:<span class="cm-number">2</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">c</span>:<span class="cm-number">3</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 207px;"></div></div></div></pre><h4><a name='header-c169' class='md-header-anchor '></a>[强烈推荐] 对象属性简写。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> { <span class="cm-property">age</span>: <span class="cm-number">23</span> }</span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">return</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">name</span>: <span class="cm-string">'aaa'</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">a</span>: <span class="cm-variable">a</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> { <span class="cm-property">age</span>: <span class="cm-number">23</span> }</span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">return</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">name</span>: <span class="cm-string">'aaa'</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">a</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h4><a name='header-c178' class='md-header-anchor '></a>[强烈推荐] 对象扩展的方法简写。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-property">fn</span>: <span class="cm-keyword">function</span>() {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp;  <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  }</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-property">fn</span>() {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp;  <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  }</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h4><a name='header-c187' class='md-header-anchor '></a>[推荐] 使用Object解构赋值/函数参数解构。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">a</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">b</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">b</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">c</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">a</span>.<span class="cm-property">c</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">d</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">a</span>.<span class="cm-property">d</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> { <span class="cm-def">a</span>, <span class="cm-def">b</span> } <span class="cm-operator">=</span> <span class="cm-keyword">this</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> { <span class="cm-property">a</span> : { <span class="cm-def">c</span>, <span class="cm-def">d</span> } } <span class="cm-operator">=</span> <span class="cm-keyword">this</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">fn</span>(<span class="cm-def">obj</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">let</span> { <span class="cm-def">a</span>, <span class="cm-def">b</span>, <span class="cm-def">c</span> } <span class="cm-operator">=</span> <span class="cm-variable-2">obj</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-variable">fn</span>({ <span class="cm-property">a</span>:<span class="cm-number">1</span>, <span class="cm-property">b</span>:<span class="cm-number">2</span>, <span class="cm-property">c</span>:<span class="cm-number">3</span> })</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 138px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">fn</span>({ <span class="cm-def">a</span><span class="cm-operator">=</span><span class="cm-number">0</span>, <span class="cm-def">b</span><span class="cm-operator">=</span><span class="cm-number">0</span>, <span class="cm-def">c</span><span class="cm-operator">=</span>[]} <span class="cm-operator">=</span> {} ) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-variable">fn</span>({ <span class="cm-property">a</span>:<span class="cm-number">1</span>, <span class="cm-property">b</span>:<span class="cm-number">2</span>, <span class="cm-property">c</span>:{ <span class="cm-property">d</span>: <span class="cm-number">4</span>} })</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h4><a name='header-c204' class='md-header-anchor '></a>[推荐] 设置函数的形参初始值。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">fn</span>(<span class="cm-def">array</span>, <span class="cm-def">string</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">if</span>(<span class="cm-keyword">typeof</span> <span class="cm-variable-2">string</span> <span class="cm-operator">!==</span> <span class="cm-string">'string'</span>) <span class="cm-keyword">return</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">if</span>(<span class="cm-operator">!</span><span class="cm-variable-2">array</span>.<span class="cm-property">length</span>) <span class="cm-keyword">return</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable-2">string</span> <span class="cm-operator">=</span> <span class="cm-variable-2">string</span> <span class="cm-operator">||</span> <span class="cm-string">''</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable-2">array</span> <span class="cm-operator">=</span> <span class="cm-variable-2">array</span> <span class="cm-operator">||</span> []</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 138px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">fn</span>(<span class="cm-def">array</span> <span class="cm-operator">=</span> [], <span class="cm-def">string</span> <span class="cm-operator">=</span> <span class="cm-string">''</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><blockquote><p>注解： JavaScript是弱语言类型，给形参设置初始值可以使开发者知道传入的参数类型，从而方便后续维护。</p></blockquote><h3><a name='header-c216' class='md-header-anchor '></a>基础风格指南</h3><h4><a name='header-c217' class='md-header-anchor '></a>[强烈推荐] 避免出现console.log、debugger。</h4><h4><a name='header-c218' class='md-header-anchor '></a>[强烈推荐]  避免使用魔鬼数字和魔鬼字符串。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// 1和2的含义不清晰</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;</span><span class="cm-variable">el</span><span class="cm-operator">-</span><span class="cm-variable">form</span><span class="cm-operator">-</span><span class="cm-variable">item</span> <span class="cm-variable">prop</span><span class="cm-operator">=</span><span class="cm-string">"userName"</span> <span class="cm-variable">v</span><span class="cm-operator">-</span><span class="cm-keyword">if</span><span class="cm-operator">=</span><span class="cm-string">"a !== 1 &amp;&amp; a !== 2"</span><span class="cm-operator">&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;</span><span class="cm-string-2">/el-form-item&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// 1和2的含义不清晰，且和上面的视图数据耦合，难以维护</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">!==</span> <span class="cm-number">1</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">a</span><span class="cm-operator">!==</span> <span class="cm-number">2</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 207px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// .js文件</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">TYPE</span> <span class="cm-operator">=</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-property">CAR</span>: <span class="cm-number">1</span>,</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-property">PERSON</span>: <span class="cm-number">2</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">export</span> <span class="cm-keyword">default</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">TYPE</span>, <span class="cm-comment">// 类型</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// .vue文件</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;</span><span class="cm-variable">el</span><span class="cm-operator">-</span><span class="cm-variable">form</span><span class="cm-operator">-</span><span class="cm-variable">item</span> <span class="cm-variable">prop</span><span class="cm-operator">=</span><span class="cm-string">"userName"</span> <span class="cm-variable">v</span><span class="cm-operator">-</span><span class="cm-keyword">if</span><span class="cm-operator">=</span><span class="cm-string">"a !== TYPE.CAR &amp;&amp; a !== TYPE.PERSON"</span><span class="cm-operator">&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;</span><span class="cm-string-2">/el-form-item&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">import</span> { <span class="cm-def">TYPE</span> } <span class="cm-keyword">from</span> <span class="cm-meta">...</span> <span class="cm-comment">// 引入常量文件</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">!==</span> <span class="cm-variable">TYPE</span>.<span class="cm-property">CAR</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">a</span><span class="cm-operator">!==</span> <span class="cm-variable">TYPE</span>.<span class="cm-property">PERSON</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 437px;"></div></div></div></pre><blockquote><p>细则：如果字符串只用到单文件单次，例如正则表达式以及其他数值等，那么可以不抽离成常量进行维护，因为修改的地方也就一处，没有维护的二义性，但是必须强加注释说明含义。在单个文件中调用两次以上，而不在多个文件中调用，可以将常量抽离在单文件的全局位置，如果是多文件调用，那么需要抽离成一个公共的constant.js文件进行维护。</p></blockquote><h4><a name='header-c230' class='md-header-anchor '></a>[强烈推荐] 行注释和块注释。</h4><h5><a name='header-c231' class='md-header-anchor '></a>HTML注释</h5><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;!--</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <span class="cm-variable">注释</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="cm-operator">--&gt;</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;</span><span class="cm-variable">el</span><span class="cm-operator">-</span><span class="cm-variable">form</span><span class="cm-operator">-</span><span class="cm-variable">item</span> <span class="cm-variable">prop</span><span class="cm-operator">=</span><span class="cm-string">"userName"</span> <span class="cm-variable">v</span><span class="cm-operator">-</span><span class="cm-keyword">if</span><span class="cm-operator">=</span><span class="cm-string">"a !== 1 &amp;&amp; a !== 2"</span><span class="cm-operator">&gt;</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-operator">&lt;</span><span class="cm-string-2">/el-form-item&gt;</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class='md-fences mock-cm' style='display:block;position:relative'>&lt;!-- 前后各空1格 --&gt;
&lt;el-form-item prop=&quot;userName&quot; v-if=&quot;a !== TYPE.CAR &amp;&amp; a !== TYPE.PERSON&quot;&gt;
&lt;/el-form-item&gt;</pre><h5><a name='header-c240' class='md-header-anchor '></a>代码块注释</h5><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">!==</span> <span class="cm-variable">TYPE</span>.<span class="cm-property">CAR</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">a</span><span class="cm-operator">!==</span> <span class="cm-variable">TYPE</span>.<span class="cm-property">PERSON</span>) { &nbsp;  <span class="cm-comment">// &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 注释</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// 上一行对齐注释</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">!==</span> <span class="cm-variable">TYPE</span>.<span class="cm-property">CAR</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">a</span><span class="cm-operator">!==</span> <span class="cm-variable">TYPE</span>.<span class="cm-property">PERSON</span>) { </span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><h5><a name='header-c249' class='md-header-anchor '></a>变量注释</h5><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">import</span> { <span class="cm-def">a</span> } <span class="cm-keyword">from</span> <span class="cm-variable">b</span> &nbsp; &nbsp; &nbsp; &nbsp; <span class="cm-comment">// &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 注释</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">object</span> <span class="cm-operator">=</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span><span class="cm-property">typeA</span>: {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>  <span class="cm-property">a</span>: <span class="cm-atom">undefined</span> &nbsp; &nbsp; &nbsp;  <span class="cm-comment">//  注释  </span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>},</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span><span class="cm-property">typeB</span>: {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>  <span class="cm-property">b</span>: <span class="cm-atom">undefined</span> &nbsp; &nbsp; &nbsp;  <span class="cm-comment">// &nbsp; &nbsp; 注释 </span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>}<span class="cm-tab">   </span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 253px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">import</span> { <span class="cm-def">a</span> } <span class="cm-keyword">from</span> <span class="cm-variable">b</span> <span class="cm-comment">// 前后各空1格，注意不要使用tab。</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span>​</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">object</span> <span class="cm-operator">=</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span><span class="cm-property">typeA</span>: {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>  <span class="cm-property">a</span>: <span class="cm-atom">undefined</span> <span class="cm-comment">// 前后各空1格，注意不要使用tab。</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>},</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span><span class="cm-property">typeB</span>: {</span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>  <span class="cm-property">b</span>: <span class="cm-atom">undefined</span> <span class="cm-comment">// 前后各空1格，注意不要使用tab。</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-tab">    </span>}<span class="cm-tab">   </span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 230px;"></div></div></div></pre><h5><a name='header-c258' class='md-header-anchor '></a>方法注释</h5><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">object</span> <span class="cm-operator">=</span> {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">/**</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">  * 注释说明</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">  */</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">fn</span>(<span class="cm-def">a</span>, <span class="cm-def">b</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> }</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 184px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">object</span> <span class="cm-operator">=</span> {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> </span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">/**</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; * @author  zhangsan</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; * @date &nbsp;  2018-02-28 16:49:37(陈冠彬认为可需要也可不要)</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; * @desc &nbsp;  方法描述</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; * @param &nbsp; {Object} a 描述</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; * @param &nbsp; {String} b 描述</span></span></pre><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; */</span><span class="cm-tab">   </span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-property">fn</span>(<span class="cm-def">a</span>, <span class="cm-def">b</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> }</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 299px;"></div></div></div></pre><h4><a name='header-c267' class='md-header-anchor '></a>[强烈推荐] 使用三目运算符。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">a</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// 只有一行执行代码 </span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-string">'1'</span> </span></pre><pre class=""><span style="padding-right: 0.1px;">} <span class="cm-keyword">else</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// 只有一行执行代码</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-string">'2'</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 161px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-variable">a</span> <span class="cm-operator">?</span> <span class="cm-string">'1'</span> : <span class="cm-string">'2'</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><h4><a name='header-c276' class='md-header-anchor '></a>[强烈推荐] 使用switch代替if/else，但不滥用。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">===</span> <span class="cm-number">1</span>) { </span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ... </span></span></pre><pre class=""><span style="padding-right: 0.1px;">} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable">a</span> <span class="cm-operator">===</span> <span class="cm-number">2</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">===</span> <span class="cm-number">3</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">} <span class="cm-keyword">else</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 207px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-comment">// switch速度比if else快，多个并行判断条件尽量使用switch，使用switch强制必须带default。</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">switch</span>(<span class="cm-variable">a</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">case</span> <span class="cm-number">1</span>:</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">case</span> <span class="cm-number">2</span>:</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">case</span> <span class="cm-number">3</span>:</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">default</span>: </span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 253px;"></div></div></div></pre><blockquote><p>细则：使用switch不能缺少deafult。</p></blockquote><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">switch</span>(<span class="cm-variable">a</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">case</span> <span class="cm-number">1</span>:</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-string">'a1'</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">case</span> <span class="cm-number">2</span>:</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-string">'a2'</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">case</span> <span class="cm-number">3</span>:</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-string">'a3'</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">default</span>: </span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">break</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 299px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-variable">b</span> <span class="cm-operator">=</span> <span class="cm-string-2">`a${</span><span class="cm-variable">a</span><span class="cm-string-2">}`</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><h4><a name='header-c296' class='md-header-anchor '></a>[强烈推荐] forEach逻辑尽量使用for-of代替，当然某些逻辑可以使用Array针对性更强的原生函数，比如使用every、some、filter、includes、find、findIndex、reduce等。</h4><blockquote><p>注解： 关于switch和if-else也做了说明，这里的api在使用时如果是大数据量操作，需要考虑性能问题，具体查看<a href='https://git.hikvision.com.cn/users/zhuxiankang/repos/dolphin_code/browse/%25E7%25AE%2597%25E6%25B3%2595%25E5%2592%258C%25E6%25B5%2581%25E7%25A8%258B%25E6%258E%25A7%25E5%2588%25B6.md'>算法和流程控制</a>。</p></blockquote><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">root</span> <span class="cm-operator">=</span> <span class="cm-string">''</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">this</span>.<span class="cm-property">a</span>.<span class="cm-property">forEach</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> {</span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">if</span> (<span class="cm-operator">!</span><span class="cm-variable-2">item</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp;  <span class="cm-variable">root</span> <span class="cm-operator">=</span> <span class="cm-variable-2">item</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  }</span></pre><pre class=""><span style="padding-right: 0.1px;">})</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 138px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">root</span><span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">a</span>.<span class="cm-property">length</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-keyword">this</span>.<span class="cm-property">a</span>.<span class="cm-property">find</span>(<span class="cm-def">item</span><span class="cm-operator">=&gt;</span> <span class="cm-operator">!</span><span class="cm-variable-2">item</span>)</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><h4><a name='header-c308' class='md-header-anchor '></a>[强烈推荐] for循环遍历时如果不需要处理则continue，如果需要终止遍历则break。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">i</span>,<span class="cm-def">len</span><span class="cm-operator">=</span><span class="cm-number">100</span>; <span class="cm-variable">i</span><span class="cm-operator">&lt;</span><span class="cm-variable">len</span>; <span class="cm-variable">i</span><span class="cm-operator">++</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">if</span>(<span class="cm-variable">i</span> <span class="cm-operator">!==</span> <span class="cm-number">50</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp;  <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp;}</span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">i</span>,<span class="cm-def">len</span><span class="cm-operator">=</span><span class="cm-number">100</span>; <span class="cm-variable">i</span><span class="cm-operator">&lt;</span><span class="cm-variable">len</span>; <span class="cm-variable">i</span><span class="cm-operator">++</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-keyword">if</span>(<span class="cm-variable">i</span> <span class="cm-operator">===</span> <span class="cm-number">50</span>) <span class="cm-keyword">continue</span></span></pre><pre class=""><span style="padding-right: 0.1px;">  <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><h4><a name='header-c318' class='md-header-anchor '></a>[强烈推荐] 如果函数不满足条件不执行，则先判断并return。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">fn</span>() {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// 当前函数只有满足条件才执行</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">if</span>(<span class="cm-variable">a</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">b</span>) { </span></pre><pre class=""><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> }</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">return</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 161px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">fn</span>() {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">if</span>(<span class="cm-operator">!</span><span class="cm-variable">a</span> <span class="cm-operator">||</span> <span class="cm-operator">!</span><span class="cm-variable">b</span>) <span class="cm-keyword">return</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 92px;"></div></div></div></pre><h4><a name='header-c328' class='md-header-anchor '></a>[强烈推荐] 尽量不使用window全局变量，防止变量污染。</h4><h4><a name='header-c329' class='md-header-anchor '></a>[强烈推荐] 使用局部变量减少作用域链和原型链的搜索。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">i</span><span class="cm-operator">=</span><span class="cm-number">0</span>; <span class="cm-variable">i</span><span class="cm-operator">&lt;</span><span class="cm-variable">a</span>.<span class="cm-property">length</span>; <span class="cm-variable">i</span><span class="cm-operator">++</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">i</span><span class="cm-operator">=</span><span class="cm-number">0</span>, <span class="cm-def">len</span><span class="cm-operator">=</span><span class="cm-variable">a</span>.<span class="cm-property">length</span>; <span class="cm-variable">i</span><span class="cm-operator">&lt;</span><span class="cm-variable">len</span>; <span class="cm-variable">i</span><span class="cm-operator">++</span>) {</span></pre></div><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 69px;"></div></div></div></pre><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">Number</span>.<span class="cm-property">parseInt</span>(<span class="cm-variable">number</span>) <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">Number</span>.<span class="cm-property">parseInt</span>(<span class="cm-variable">number1</span>)) {}</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">parseInt</span> <span class="cm-operator">=</span> <span class="cm-variable">Number</span>.<span class="cm-property">parseInt</span></span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">if</span>(<span class="cm-variable">parseInt</span>(<span class="cm-variable">number</span>) <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">parseInt</span>(<span class="cm-variable">number1</span>)) {}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 46px;"></div></div></div></pre><blockquote><p>注解： 关于创建局部变量的优势可以查看<a href='https://git.hikvision.com.cn/users/zhuxiankang/repos/dolphin_code/browse/%25E4%25BD%259C%25E7%2594%25A8%25E5%259F%259F%25E9%2593%25BE.md'>作用域链</a>和<a href='https://git.hikvision.com.cn/users/zhuxiankang/repos/dolphin_code/browse/%25E5%258E%259F%25E5%259E%258B%25E9%2593%25BE.md'>原型链</a>。</p></blockquote><h4><a name='header-c349' class='md-header-anchor '></a>[推荐] 一个函数的代码尽量控制在一屏以内，尽量颗粒化控制。</h4><h4><a name='header-c350' class='md-header-anchor '></a>[谨慎] 不要肆意开辟内存。</h4><blockquote><p>反例</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Array</span>(<span class="cm-number">10000</span>).<span class="cm-property">fill</span>(<span class="cm-string">''</span>)</span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">b</span> <span class="cm-keyword">of</span> <span class="cm-variable">a</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-keyword">const</span> <span class="cm-def">string</span> <span class="cm-operator">=</span> <span class="cm-string-2">`hello ${</span><span class="cm-variable">b</span><span class="cm-string-2">}`</span></span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">fn</span>(<span class="cm-variable">string</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 138px;"></div></div></div></pre><blockquote><p>推荐</p></blockquote><pre class="md-fences md-end-block" lang="javascript"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-height: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Array</span>(<span class="cm-number">10000</span>).<span class="cm-property">fill</span>(<span class="cm-string">''</span>)</span></pre></div><pre class=""><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span>(<span class="cm-keyword">let</span> <span class="cm-def">b</span> <span class="cm-keyword">of</span> <span class="cm-variable">a</span>) {</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-variable">fn</span>(<span class="cm-string-2">`hello ${</span><span class="cm-variable">b</span><span class="cm-string-2">}`</span>)</span></pre><pre class=""><span style="padding-right: 0.1px;"> <span class="cm-comment">// ...</span></span></pre><pre class=""><span style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 0px;"></div><div class="CodeMirror-gutters" style="display: none; height: 115px;"></div></div></div></pre><h3><a name='header-c359' class='md-header-anchor '></a>命名风格指南</h3><ul><li>[强烈推荐] 变量命名： 驼峰式命名，变量命名只允许有字母、数字、$ 和下划线 _。例如typeScript。</li><li>[强烈推荐] 类命名: 首字母大写，例TypeScript。</li><li>[强烈推荐] 常量仅使用大写字母和下划线来命名。</li><li>[推荐] 文件名按菜单分类，不再嵌套多层文件，文件名首字母大写，例Person。</li><li>[推荐] 函数的命名使用驼峰式命名，动词+(修饰符)+名词，例goNextPage，getTable，searchAreaTree。</li></ul><h3><a name='header-c376' class='md-header-anchor '></a>Css风格指南</h3><h4><a name='header-c377' class='md-header-anchor '></a>[推荐] 避免使用内联样式。</h4><h2><a name='header-c378' class='md-header-anchor '></a>修订记录</h2><p><strong>2018/06</strong></p><ul><li>[强烈推荐] 使用try/catch捕获await，新增注解。</li><li>[推荐] 设置函数的形参初始值，新增注解。</li><li>[强烈推荐]  避免使用魔鬼数字和魔鬼字符串，新增细则。</li><li>[强烈推荐] 行注释和块注释，修改方法注释风格。</li><li>[强烈推荐] 使用switch代替if/else，但不滥用，新增细则。</li><li>[推荐] 避免使用内联样式，新增。</li><li>[强烈推荐] 避免出现console.log、debugger，新增。</li><li>[推荐] 避免使用document.getElementById、document.querySelectorAll等，使用ref绑定DOM对象，新增。</li><li>[强烈推荐] Promise需要同时有resolve和reject，新增。</li><li>[强烈推荐] for循环遍历时如果不需要处理则continue，如果需要终止遍历则break，新增。</li></ul></div>
</body>
</html>